<template>
  <div class="elective_list_tag">
    <div v-if="$store.state.device !== 'APP'" class="nav_top_list">
      <van-icon name="arrow-left" class="left_btn" @click="$router.go(-1)"/>
      <span v-if="tagData.tag_name">{{tagData.tag_name}}</span>
    </div>
    <div class="list_tag_body">
      <img v-if="tagData.image" class="banner_img" :src="tagData.image" alt="">
      <div v-if="tagData.content" class="text_body"  :style="{height: autoHeight?'auto':'1.6rem'}">
        <div class="Compile_body_format" v-html="tagData.content">{{tagData.content}}</div>
        <button v-if="autoHeight" class="pack_up" @click="autoHeight = !autoHeight">收起</button>
        <button v-else class="open_text" @click="autoHeight = !autoHeight">展开</button>
      </div>
      <div class="list_tab">
        <div class="title_name">/ 推荐课程 /</div>
        <div class="list">
          <ul>
            <li v-for="(item, index) in listData" :key="item.product_id +' '+ index"  class="item_tab">
              <div class="img_bg_text" @click="$router.push({ path:'/elective-detail', query:{ id: item.product_id }})">
                <img :src="item.product_image[0] ? item.product_image[0].image_url : 'http://m.oucgz.cn/icon_no_img_z.png'" alt="">
                <div class="info">
                  <h3>{{item.product_name}}</h3>
                  <p>
                    <span v-for="itemTag in item.tag" :key="itemTag.tag_id"><i class="ico_hot"></i>{{itemTag.tag_name}}</span>
                  </p>
                  <p><strong>￥{{item.product_fee_items[0].item_total_price}}</strong> / {{item.product_fee_items[0].fee_items_type_name}}</p>
                </div>
              </div>
              <p class="text_title">
                {{item.major_tag2[0].intro}}
              </p>
              <div class="btn_list">
                <a href="javascript:;" @click="openAdvisory">在线咨询</a>
                <a href="tel:400-009-9661" >电话咨询</a>
                <a href="javascript:;" @click="openHtml(item)">立即报读</a>
              </div>
            </li>
            <div v-if="footerShow" class="no_data_title">
              <img src="../../../assets/img/modules/media/icon_v2_4.png" alt="">
              <p>没有推荐内容~</p>
            </div>
          </ul>
        </div>
      </div>
      <div class="list_tab tj_body">
        <div class="title_name">/ 其他推荐 /</div>
        <div class="img_list">
          <img  v-for="(item, index) in listImgData" :key="item.tag_id +' '+ index" :src="item.image" alt=""   @click="$router.push({ path:'/elective-list-tag', query:{ tag_id: item.tag_id }})">
          <p>免责声明：</p>
          <p>本信息采集于2010年9月9日，实际优惠信息可能有变动，请以咨询信息为准。</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'elective_list_tag',
  components: {},
  data () {
    return {
      autoHeight: false, // 展开文字
      footerShow: false, // 推荐内容
      listData: [], // 列表数据
      listImgData: [], // 图片数据
      tagData: {
        image: ''
      }
    }
  },
  props: {},
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.tag_id = this.$route.query.tag_id || ''
        this.getList()
        this.getTagData()
        this.getTagImgData()
      },
      // 深度观察监听
      deep: true
    }
  },
  methods: {
    /* wf_Huang 2019/8/29 0029 跳页面 这里产品要求特殊处理明航的报读页面  不知道是怎么想的 哎 */
    openHtml (item) {
      if (this.$store.state.gsign === 'mhzg') {
        window.location.href = `http://caac.qy.oucnet.com/index.php?c=caacnew&m=m1material&product_id=${item.product_id}`
      } else {
        this.$router.push({ path: '/elective-register', query: { product_name: item.product_name, product_id: item.product_id, end_price: item.product_sku[0].price } })
      }
    },
    /* wf_Huang 2019/8/28 0028 咨询老师 */
    openAdvisory () {
      if (this.$store.state.gsign === 'qy') {
        window.location.href = 'https://webchat.7moor.com/wapchat.html?accessId=023462d0-8040-11e8-9c33-012cab216043&fromUrl=选学&urlTitle=企业职工学院APP'
      } else {
        window.location.href = 'https://webchat.7moor.com/wapchat.html?accessId=023462d0-8040-11e8-9c33-012cab216043&fromUrl=选学&urlTitle=广州实验学院APP'
      }
    },
    /* wf_Huang 2019/10/9 0009 获取标签图片列表 */
    getTagImgData () {
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/apis/getTagList.html?school_id=${this.$store.state.elective.school_id}&recommend=1&limit=2`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        this.listImgData = res.data
      }).catch(() => {
      })
    },
    /* wf_Huang 2019/10/9 0009 获取标签图片 */
    getTagData () {
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/apis/getTag.html?tag_id=${this.tag_id}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        this.tagData = res.data
      }).catch(() => {
      })
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/18 0018 18:30
     *@function  获取列表
     *****************************************/
    getList () {
      if (this.current === 1) {
        this.listData = []
      }
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/apis/getSaleProductList.html?tag_id=${this.tag_id}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.$toast('推荐列表查询失败~')
          return false
        }
        if (res.data.list.length === 0) {
          this.footerShow = true
        } else {
          this.footerShow = false
        }
        this.listData = res.data.list
      }).catch(() => {
      })
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    this.tag_id = this.$route.query.tag_id || ''
    this.getList()
    this.getTagData()
    this.getTagImgData()
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .elective_list_tag {
    min-height: 1600px;
    .nav_top_list {
      z-index: 99;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32px;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      background-color: #ffffff;
      box-shadow: 0 2px 12px 0 rgba(153, 153, 153, 0.14);
      .left_btn {
        color: #999999;
        font-size: 32px;
        margin-right: 130px;
      }

      span {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        color: #181818;
      }

      .btn_right {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        a {
          height: 100%;
          display: flex;
          padding: 0 10px;
          position: relative;

          &:nth-child(1) {
            img {
              width: 36px;
              height: 34px;
            }
          }

          &:nth-child(2) {
            img {
              width: 34px;
              height: 34px;
            }
          }

          &:nth-child(3) {
            img {
              width: 37px;
              height: 34px;
            }
          }

          .active {
            width: 18px;
            height: 18px;
            position: absolute;
            right: 5px;
            top: 1px;
          }
        }
      }
    }

    .list_tag_body {
      margin: 95px auto;
      max-width: 750px;

      .banner_img {
        width: 750px;
        height: 262px;
        display: block;
      }

      .text_body {
        margin: 31px;
        overflow: hidden;
        position: relative;

        .open_text, .pack_up {
          font-size: 30px;
          color: #027FFE;
          background-color: transparent;
          border: 0;
          position: absolute;
          bottom: 20px;
          right: 0;
        }
      }

      .list_tab {
        border-top: 10px solid #F6F6F6;
        border-bottom: 10px solid #F6F6F6;
        .title_name {
          font-size: 38px;
          color: #222222;
          text-align: center;
          padding: 40px 30px;
        }

        .item_tab {
          background: #FFFFFF;
          box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.10);
          border-radius: 6px;
          padding: 20px;
          margin-bottom:30px;
          .text_title{
            font-size: 26px;
            color: #666666;
            margin: 0 0 20px;
            line-height: 35px;
          }
          .btn_list{
            padding: 20px 0 0;
            border-top: 2px solid #efefef;
            display: flex;
            justify-content: space-between;
            a{
              background: #FFFFFF;
              border: 1px solid #027FFE;
              border-radius: 4px;
              font-size: 26px;
              color: #027FFE;
              line-height: 58px;
              width: 140px;
              height: 58px;
              text-align: center;
              &:last-child{
                border: 1px solid #FF0000;
                background: #FF0000;
                border-radius: 4px;
                font-size: 26px;
                color: #FFFFFF;
                width: 330px;
                height: 58px;
              }
            }
          }
          .img_bg_text{
            height:190px;
          }
        }
      }
      .tj_body{
        border: 0;
        .img_list{
          padding: 30px;
          img{
            width: 690px;
            height: 240px;
            display: block;
            margin-bottom: 30px;
          }
          p{
            font-size: 22px;
            color: #999999;
            line-height: 30px;
            margin: 10px 0 0 0;
          }
        }
      }
      .list{
        padding: 30px;
        ul{
          li{
            img{
              width:180px;
              height:180px;
              float:left;
              margin-right:30px;
            }
            .info{
              display: flex;
              flex-direction: column;
              align-content: space-between;
              h3{
                font-size:32px;
                color:#222;
                line-height:44px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                -webkit-line-clamp: 2;
                margin:0 0 20px;
              }
              p{
                font-size:24px;
                color:#666;
                margin:0 0 20px;
                strong{
                  color:#FF0000;
                }
              }
              span{
                display:inline-block;
                height:34px;
                line-height:34px;
                background:#FFF8EB;
                font-size:22px;
                margin-right: 10px;
                color:#FF0000;
                padding:0 15px;
                border-top-left-radius: 17px;
                border-bottom-right-radius: 17px;
                .ico_hot{
                  display: inline-block;
                  width: 16px;
                  height: 20px;
                  background: url(../../../assets/img/modules/elective/icon_hot.png)
                  no-repeat;
                  background-size: 16px 20px;
                  margin-right: 10px;
                  position: relative;
                  top: 2px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
